<template>
  <div>
    <!-- Header区域 -->
    <el-header>首页</el-header>
    <!-- 搜索框区域 -->
    <div class="index_search_box">
      <div style="display: flex;border: 1px solid #DCDFE6;
      border-radius: 25px;align-items: center;
      padding-right: 5px;box-sizing: border-box;
      ">
        <el-input
          placeholder="搜索你想要的产品"
          v-model="index_search"
          clearable>
        </el-input>
        <a href="#" @click.prevent="searchGoods(false,null)">
          <span style="font-family: iconfont;">&#xe699;</span>
        </a>
      </div>
    </div>
    <!-- 轮播图展示区域 -->
    <div id="Rotation">
      <el-carousel :interval="3000" height="210px" arrow="always">
        <el-carousel-item v-for="item in rotationList" :key="item.bannerId" v-if="item.status==1">
          <!-- <h3>{{ item }}</h3> -->
          <a href="#">
            <img :src="item.bannerImg" width="100%" height="100%"/>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 常用分类区域 -->
    <div class="index_classify" v-loading="loadStatus">
      <!-- 展示所有常用分类(上限最大为3,下限最小为1) -->
      <div id="classify_classify" v-for="item in classifyList"
                :key="item.classifyId" v-if="item.classifyType==0">
          <a @click="searchGoods(true,item.classifyId)">
            <img :src="item.classifyImg" />
            <p>{{item.classifyName}}</p>
          </a>
      </div>
      <!-- 展示所有攻略文章(上限最大为1) -->
      <div id="classify_article" v-for="item in classifyList"
                :key="item.classifyId" v-if="item.classifyType==1">
          <a tabindex="article" @click="jump('article')">
            <img :src="item.classifyImg"/>
            <p>{{item.classifyName}}</p>
          </a>
      </div>
    </div>
    <!-- 特惠区域 -->
      <!-- 特惠标题 -->
    <div class="partition_title">
      <span>今日特惠</span>
      <p>TODAY SAECIAL</p>
    </div>
      <!-- 特惠物品 -->
    <div class="index_rand_goodslist">
      <div class="index_rand_goods" v-for="item in randGoodsList" :key="item.goodsId">
        <a href="#" style="display: flex;flex-direction: column;"  @click="showGoodsDetails(item)">
          <div style="width: 100%;height: 100px;margin-bottom: 5px;border-radius: 10px;">
            <img :src="item.goodsImg">
          </div>
          <div style="display: flex;  width: 100%;flex: 1;flex-direction: column;
          text-align: left;position: relative;">
            <p><span>火热</span>{{item.goodsName}}</p>
            <p><span>￥</span>{{item.price}}.00</p>
          </div>
        </a>
      </div>
    </div>
    <!-- 新品区域 -->
      <!-- 新品标题 -->
    <div class="partition_title">
      <span>新品上市</span>
      <p>NEW PRODUCTS LISTED</p>
    </div>
    <!-- 新品物品 -->
    <div class="index_new_goodslist">
      <div class="index_new_goods" v-for="item in newGoodsList" :key="item.goodsId">
        <a href="#" style="display: flex;width: 100%;height: 100%;"  @click="showGoodsDetails(item)">
          <div style="height: 100%;width: 170px;">
            <img :src="item.goodsImg">
          </div>
          <div style="">
            <p>{{item.goodsName}}</p>
            <p style="display: flex;">
              <span>{{item.classify.classifyName}}</span>
              <span>{{item.classify.classifyName}}</span>
            </p>
            <div style="display: flex; flex-direction: column;">
              <span style="color: #ff2122;font-size: 22px;"><b style="font-size: 14px;">￥</b>{{item.price}}.00</span>
              <p style="display: flex;justify-content: space-between;align-items: center;">
                <span>详情 >></span>
                <b style="font-family: iconfont;
                border: 2px solid; border-radius: 25px;
                font-size: 23px;padding: 3px;box-sizing: border-box;">&#xe64d;</b>
              </p>
            </div>
          </div>
        </a>
      </div>
    </div>
    <!-- 本店特色区域 -->
      <!-- 特色标题 -->
    <div class="partition_title">
      <span>本店特色</span>
      <p>THE STORE FEATURES</p>
    </div>
    <!-- 特色物品 -->
    <div class="special_goodslist">
      <div class="special_goods">
        <a href="#">
          <img src="../../assets/龙猫蛋糕卷.png" />
          <div class="special_goods_title">
            <span>龙猫蛋糕卷</span>
            <p>TOTORO CAKE ROLL</p>
          </div>
        </a>
      </div>
      <div class="special_goods">
        <a href="#">
          <img src="../../assets/提拉米苏.png" />
          <div class="special_goods_title">
            <span>提拉米苏</span>
            <p>TIRAMISU</p>
          </div>
        </a>
      </div>
      <div class="special_goods">
        <a href="#">
          <img src="../../assets/总统黄油云顶曲奇.png" />
          <div class="special_goods_title">
            <span>总统黄油云顶曲奇</span>
            <p>GENTING COOKIES</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
  	name: "index",
    components: {
    },
    data() {
    	return {
        loadStatus: false,
        // 搜索框
        index_search:'',
          //搜索框placeholder内容
        icon:'\ue699 搜索你想要的产品',
        //轮播图
    		rotationList: {},
        //分类
        classifyList:{},
        //随机获取3个商品信息
        randGoodsList:{},
        //获取最新3个商品信息
        newGoodsList:{},
    	}
    },
     mounted() {
      this.getRotation()
      this.getClassify()
      this.getRandGoods()
     },
     methods: {
       /* 自定义跳转事件 */
       jump(params){
        console.log(params)
        // this.$router.push({path:`/home/index/${params}`})
        this.$router.replace({path:`/home/index/${params}`})
       },
       //获取轮播图信息
       getRotation() {
        var self = this;
        this.loadStatus=true
        self.$http.get("/api/CakeShop/Banner/findAllRotation", {
        }).then(function(res) {
          // console.log(res)
          self.rotationList = res.data.bannerImgList
          self.loadStatus=false
        }).catch(function(error) {
          // console.log(error)
        })
       },
       //获取分类和文章信息
       getClassify(){
        var self = this;
        self.$http.get("/api/CakeShop/DataManage/findAllClassify", {
        }).then(function(res) {
          // console.log(res)
          self.classifyList = res.data.classifyList
        }).catch(function(error) {
          // console.log(error)
        })
       },
      //前台首页随机获取商品信息(数量为3)
      //前台首页获取最新商品信息(数量为3)
      getRandGoods(){
       var self = this;
       self.$http.get("/api/CakeShop/GoodsManage/getRandGoods", {
       }).then(function(res) {
         // console.log(res)
         self.randGoodsList = res.data.randGoodsList
         self.newGoodsList = res.data.newGoodsList
       }).catch(function(error) {
         // console.log(error)
       })
      },
      //准备跳转
      showGoodsDetails(item){
        sessionStorage.setItem("lastPage",'/home/index')
        this.$router.push({
          path:"/goodsItemDetails",
          name:"GoodsDetails",
          params:{
            goodsItemDetails:item
          }
        })
      },

      // 搜索框搜素方法
      searchGoods(status,id){
        //存储返回页
        sessionStorage.setItem("lastPage","/home/index")
        if(status){
          this.index_search=""
        }else{
          id=''
        }
        this.$http.get("/api/CakeShop/GoodsManage/searchForGoods?goodsName="
        +this.index_search+"&isClassify="+status+"&classifyId="+id)
        .then(res=>{
          if(res.data.code == 200){
            sessionStorage.setItem("goodsList",JSON.stringify(res.data.goodsList))
            this.$router.push({
              path:"/search",
            })
          }
        })
      }
     },
  }
</script>

<style scoped>
  /* 分区标题 */
  .partition_title{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 20px 0;
    /* background-color: #000000; */
    color: #53382d;
  }
  .partition_title span{
    font-size: 18px;
    margin: 0 130px;
    padding: 3px 0;
    border-bottom: 1px solid;
  }
  .partition_title p{
    font-size: 10px;
    padding: 2px 0;
  }

  /* 搜索框区域 */
  .index_search_box{
    margin-top: 50px;
    padding:8px 20px;
  }
        /* 1.这里的  >>> 可以用 /deep/ 替换掉，这里的 /deep/ 操作符是 >>> 的别名，同样也可以正常工作。 */
        /* 2.这里的 !important 不加其实也没毛病，但是因为这是使用第三方库的样式，所以在覆盖样式时最好加上 !important ，
          这样才能指明优先级。 */
  .index_search_box >>> .el-input__inner{
    /* color: green !important; */
    height: 35px;
    border-radius: 25px;
    font-family: iconfont;
    border: none;
  }
  .index_search_box div span{
    display: inline-block;
    height: 100%;
    /* background-color: #000000; */
    color: #949494;
    font-size: 25px;
  }
  /* 轮播图区域 */
  #Rotation{
    width: 100%;
    background-color: #99a9bf;
  }
  /* 常用分类区域 */
  .index_classify{
    display: flex;
    height: 100px;
    margin: 20px;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-radius: 10px;
    /* 阴影边框效果 */
    box-shadow: 0 0 3px 3px #e6e6e6;
  }
  .index_classify a{
    color: #000000;
  }
  /* 特惠物品区域 */
  .index_rand_goodslist{
    display: flex;
    width: 100%;
    height: 165px;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .index_rand_goodslist .index_rand_goods{
    width: 30%;
    height: 100%;
    display: flex;
    padding: 3px;
    margin: 0 5px;
    /* 阴影边框效果 */
    box-shadow: 0 0 3px 3px #e6e6e6;
  }
  .index_rand_goodslist .index_rand_goods a img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .index_rand_goodslist .index_rand_goods a p:first-of-type{
    font-size: 13px;
    color: #515151;
  }
  .index_rand_goodslist .index_rand_goods a p:first-of-type span{
    font-size: 1px;
    color: #fff;
    background-color: red;
    margin-right: 4px;
  }
  .index_rand_goodslist .index_rand_goods a p:nth-of-type(2){
    position: absolute;
    bottom: 5px;
    font-size: 14px;
    color: red;
  }
  .index_rand_goodslist .index_rand_goods a p:nth-of-type(2) span{
    font-size: 1px;
    color: #515151;
  }
  /* 新品区域 */
  .index_new_goodslist{
    display: flex;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    flex-direction: column;
  }
  .index_new_goodslist .index_new_goods{
    display: flex;
    height: 170px;
    padding: 5px 5px;
    box-sizing: border-box;
  }
  .index_new_goodslist .index_new_goods a img{
    width: 100%;
    height: 100%;
  }
  .index_new_goodslist .index_new_goods a div:nth-of-type(2){
    display: flex;
    flex: 1;
    margin-left: 10px;
    padding: 10px 3px;
    box-sizing: border-box;
    text-align: left;
    color: #373737;
    flex-direction: column;
    justify-content: space-between;
  }
  .index_new_goodslist .index_new_goods a div:nth-of-type(2) p:first-of-type{
    font-size: 18px;
  }
  .index_new_goodslist .index_new_goods a div:nth-of-type(2) p:nth-of-type(2) span{
    font-size: 13px;
    display: inline-block;
    border-right: 2px solid #525252;
    padding: 0 5px;
    box-sizing: border-box;
    margin: 0;
  }
  .index_new_goodslist .index_new_goods a div:nth-of-type(2) p:nth-of-type(2) span:first-of-type{
    padding-left: 0;
  }
  .index_new_goodslist .index_new_goods a div:nth-of-type(2) p:nth-of-type(2) span:last-of-type{
    border-right: none;
  }

  .special_goodslist{
    width: 100%;
    margin-bottom: 40px;
  }
  .special_goodslist .special_goods{
    width: 100%;
    position: relative;
    margin-bottom: 5px;
  }
  .special_goodslist .special_goods img{
    width: 100%;
  }
  .special_goodslist .special_goods .special_goods_title{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    z-index: 2;
    background: rgba(138,132,132,0.7);
    color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .special_goodslist .special_goods .special_goods_title span{
    font-size: 18px;
  }
  .special_goodslist .special_goods .special_goods_title p{
    font-size: 10px;
  }
</style>
